<template>
  <div id="SearchViewSongList">
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <van-cell v-for="item in list" :key="item.index">
          <div class="songListItem" @click="playMusicList(item)">
            <div
              :style="{
                backgroundImage: 'url(' + item.coverImgUrl + ')',
                backgroundSize: '100%,100%',
              }"
            ></div>
            <div>
              <div>{{ item.name }}</div>
              <div>
                {{ currentValue }}
                {{ item.trackCount }}首 ,by {{ item.creator.nickname }}, 播放{{
                  (item.playCount / 10000).toFixed(1)
                }}万次
              </div>
            </div>
          </div>
        </van-cell>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import { searchKeyWords } from "network/api/SearchViewApi";
export default {
  data() {
    return {
      list: [],
      loading: false,
      finished: false,
      offset: 0,
      hasMore: true,
      refreshing: false,
    };
  },
  methods: {
    onLoad() {
      if (this.list.length >= 300) {
        this.loading = false;
        this.finished = true;
        return;
      }
      searchKeyWords(this.curretKeyWord, this.offset, 1000).then((res) => {
        res.data.result.playlists.forEach((element) => {
          this.list.push(element);
        });
        this.hasMore = res.data.result.hasMore;
        this.finished = !res.data.result.hasMore;
      });
      this.offset++;
      // 加载状态结束
      this.loading = false;
      console.log(this.list.length);
    },
    onRefresh() {
      setTimeout(() => {
        this.refreshing = false;
      }, 2000);
    },
    playMusicList(item) {
      this.$emit("playmusiclist", item);
    },
  },
  computed: {
    curretKeyWord() {
      // 提前滞空数据
      this.list = [];
      return this.$store.state.keyWord;
    },
  },
  watch: {
    curretKeyWord(newV, oldV) {
      searchKeyWords(this.curretKeyWord, this.offset, 1000).then((res) => {
        res.data.result.playlists.forEach((element) => {
          this.list.push(element);
        });
        this.hasMore = res.data.result.hasMore;
        this.finished = !res.data.result.hasMore;
      });
    },
  },
};
</script>

<style lang="less">
#SearchViewSongList > div > div {
  &.van-list__loading {
    background-color: #fff;
  }
  &.van-list__finished-text {
    background-color: #fff;
  }
  > div .songListItem {
    height: 50px;
    display: flex;
    > div:first-child {
      width: 50px;
      height: 50px;
      background-color: red;
      border-radius: 6px;
    }
    > div:last-child {
      flex: 9;
      > div {
        font-size: 13px;
        font-weight: bold;
        line-height: 25px;
        padding: 0 10px;
        height: 25px;
        &:last-child {
          font-weight: normal;
          font-size: 10px;
        }
      }
    }
  }
}
</style>